import { useState, useEffect, } from 'react'
import { useSearchParams } from 'react-router-dom'
import { http } from '@/utils/http'
import './home.scss'
export default function Home () {
  let [params] = useSearchParams()
  let group = params.get('group')

  const [page, setpage] = useState(1)
  const [conunt, setcount] = useState(`onSell/${page}`)
  //https://shop.sunofbeach.net/union/shop/search?page=2&keyword=%E6%89%8B%E6%9C%BA


  const [list, setlist] = useState()
  useEffect(() => {
    async function loadData () {
      if (Boolean(group) === true) { setcount(`search?page=${page}&keyword=${group}`) }
      const { data } = await http.get(`https://shop.sunofbeach.net/union/shop/${conunt}`)
      setlist(group ? data.tbk_dg_material_optional_response.result_list.map_data : data.tbk_dg_optimus_material_response.result_list.map_data)
    }
    loadData()
  }, [conunt, group])
  console.log(list)
  return <div className='home w'>
    {list && list.map(item => <div className='home-center ' key={item.item_id

    }>
      <a href={item.coupon_share_url} target='_blank' rel="noopener noreferrer">
        <div className='home-pic'>
          <img src={group ? `${item.pict_url}` : `https:${item.pict_url}`} alt="" className='home-g-pic' />
          <span className='save'>能省{item.coupon_amount}元</span>
        </div>
        <div className='price'>
          <span>原价：{item.reserve_price}</span>
          <span>券后价:{item.reserve_price - item.coupon_amount}</span>
        </div>
        <div className='info'>
          <span>{item.volume}· 人以购买</span>
        </div>
        <p>{item.title}</p>
      </a>
    </div>
    )}

  </div>
}